<template>
  <div id="app">
    <header>
      <h1>任务进度查看器</h1>
    </header>
    <main>
      <TaskList />
    </main>
  </div>
</template>

<script lang="ts" setup>
import { onMounted } from 'vue';
import { useTaskStore } from './stores/taskStore';
import TaskList from './components/TaskList.vue';

const taskStore = useTaskStore();

onMounted(async () => {
  await taskStore.initialize();
});
</script>

<style lang="less">
body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  background-color: #f0f0f0;
}

#app {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

header {
  background-color: #3f51b5;
  color: white;
  padding: 15px;
  text-align: center;
  margin-bottom: 20px;
  border-radius: 8px;

  h1 {
    margin: 0;
    font-size: 1.8em;
    font-weight: 500;
  }
}

main {
  background-color: white;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

button {
  background-color: #3f51b5;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  transition: background-color 0.3s;

  &:hover {
    background-color: #303f9f;
  }

  &:active {
    background-color: #1a237e;
  }
}

input[type="text"],
input[type="date"] {
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 14px;

  &:focus {
    outline: none;
    border-color: #3f51b5;
    box-shadow: 0 0 0 2px rgba(63, 81, 181, 0.2);
  }
}
</style>